<template>
  <div class="answer_wrapper">
    <vue-markdown class="vue-markdown" :source="replaceContent" />
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
export default {
  name: 'Answer',
  components: {
    'vue-markdown': VueMarkdown
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  computed:{
    replaceContent(){
      return this.content.replace(/<unified_house_data>[\s\S]*?<\/unified_house_data>/g, '')
                   .replace(/<ref_docs>[\s\S]*?<\/ref_docs>/g, '')
                    .replace(/<quick_question>([\d\D]*?)<\/quick_question>/g, '')
    }
  }
}
</script>


<style lang="scss">
.answer_wrapper {
  padding: 0 16px;
  border-radius: 4px;




  /* 自定义 Markdown 样式 */
  .vue-markdown h1 {
    color: #1890ff;
    border-bottom: 2px solid #eee;
  }

  .vue-markdown code {
    background: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
  }

  .vue-markdown pre {
    background: #2b2b2b;
    color: #f8f8f2;
    padding: 16px;
    overflow: auto;
    border-radius: 6px;
  }

  .vue-markdown pre code {
    background: none;
    color: inherit;
    font-size: 14px;
  }

  .vue-markdown ol {
    padding-left: 20px;
   
  }

}
</style>
